<template>
    <div class="permission-table">
        <a-table
            :key="tableKey"
            :columns="columns"
            :data-source="dataSource"
            :defaultExpandAllRows="isSpread"
            :expandable="{ expandRowByClick: true }"
            :loading="loading"
            :pagination="false"
            :scroll="{ x: 1200 }"
            row-key="id"
            class="permission-table__table rounded-2xl overflow-hidden"
        >
            <!-- 权限名称列 -->
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'permissionName'">
                    <div class="permission-name">
                        <div class="permission-name__content">
                            <div class="permission-name__title">{{ record.permissionName }}</div>
                        </div>
                    </div>
                </template>

                <!-- 路由信息列 -->
                <template v-else-if="column.key === 'routeInfo'">
                    <div class="route-info">
                        <div class="route-info__title">{{ record.routeTitle }}</div>
                    </div>
                </template>

                <!-- 组件路径 -->
                <template v-else-if="column.key === 'componentPath'">
                    <a-tag color="blue" class="route-path-tag" v-if="record.componentPath">
                        {{ record.componentPath }}
                    </a-tag>
                </template>

                <!-- 图标列 -->
                <template v-else-if="column.key === 'icon'">
                    <div v-if="record.icon" class="icon-display flex items-center gap-3">
                        <EaSvgIcon :icon-name="record.icon" class="icon-display__svg" />
                    </div>
                    <span v-else class="no-icon">无图标</span>
                </template>
                <template v-else-if="column.key === 'sortOrder'">
                    {{ record.sortOrder }}
                </template>

                <!-- 权限级别列 -->
                <template v-else-if="column.key === 'permissionLevel'">
                    <a-tag :color="getPermissionLevelColor(record.permissionLevel)">
                        {{ getPermissionLevelText(record.permissionLevel) }}
                    </a-tag>
                </template>

                <!-- 状态列 -->
                <template v-else-if="column.key === 'status'">
                    <a-tag :color="record.status === 1 ? 'green' : 'red'">
                        {{ record.status === 1 ? '启用' : '禁用' }}
                    </a-tag>
                </template>

                <!-- 创建时间列 -->
                <template v-else-if="column.key === 'createdAt'">
                    {{ formatDate(record.createdAt) }}
                </template>

                <!-- 操作列 -->
                <template v-else-if="column.key === 'actions'">
                    <a-space>
                        <a-button type="link" size="small" @click="handleAdd(record)"> 新增 </a-button>
                        <a-button type="link" size="small" @click="handleEdit(record)"> 编辑 </a-button>
                        <a-button type="link" size="small" danger @click="handleDelete(record)"> 删除 </a-button>
                    </a-space>
                </template>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts" setup>
import type { TableColumnsType } from 'ant-design-vue'
import type { SysPermissions, PermissionNode } from '@/api/core/prmissions'
import { EaSvgIcon } from '@/components'
import { computed } from 'vue'

interface Props {
    dataSource: PermissionNode[]
    loading: boolean
    selectedRowKeys?: number[]
    isSpread: boolean
}

interface Emits {
    (e: 'update:selectedRowKeys', keys: number[]): void
    (e: 'edit', record: SysPermissions): void
    (e: 'add', record: SysPermissions): void
    (e: 'delete', record: SysPermissions): void
}

const props = withDefaults(defineProps<Props>(), {
    selectedRowKeys: () => [],
})
const tableKey = computed(() => (props.isSpread ? 'spread-1' : 'spread-0'))

const emit = defineEmits<Emits>()

// 表格列配置
const columns: TableColumnsType = [
    {
        title: '菜单名称',
        key: 'routeInfo',
        width: 150,
        fixed: 'left',
    },
    {
        title: '权限标识',
        key: 'permissionName',
        width: 200,
    },
    {
        title: '组件路径',
        key: 'componentPath',
        width: 200,
    },
    {
        title: '图标',
        key: 'icon',
        width: 80,
    },
    {
        title: '排序',
        key: 'sortOrder',
        width: 80,
    },
    {
        title: '权限级别',
        key: 'permissionLevel',
        width: 120,
    },
    {
        title: '状态',
        key: 'status',
        width: 100,
    },
    {
        title: '创建时间',
        key: 'createdAt',
        width: 180,
    },
    {
        title: '操作',
        key: 'actions',
        width: 200,
        fixed: 'right',
    },
]

// // 分页配置
// const paginationConfig = computed(() => ({
//     current: 1,
//     pageSize: 10,
//     total: props.dataSource.length,
//     showSizeChanger: true,
//     showQuickJumper: true,
//     showTotal: (total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条记录`,
// }))

// 获取权限级别颜色
const getPermissionLevelColor = (level: number) => {
    switch (level) {
        case 1:
            return 'orange'
        case 2:
            return 'green'
        default:
            return 'default'
    }
}

// 获取权限级别文本
const getPermissionLevelText = (level: number) => {
    switch (level) {
        case 0:
            return '目录'
        case 1:
            return '菜单权限'
        case 2:
            return '按钮权限'
        default:
            return '未知'
    }
}

// 格式化日期
const formatDate = (dateString: string) => {
    if (!dateString) return '-'

    const date = new Date(dateString)
    // 检查日期是否有效
    if (isNaN(date.getTime())) return '-'

    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 处理编辑
const handleEdit = (record: SysPermissions) => {
    emit('edit', record)
}

// 处理新增
const handleAdd = (record: SysPermissions) => {
    emit('add', record)
}

// 处理删除
const handleDelete = (record: SysPermissions) => {
    emit('delete', record)
}
</script>

<style lang="scss" scoped>
// @import '../style/PermissionTable.scss';

:deep(.ant-pagination) {
    padding: 10px !important;
    justify-content: center;
}
</style>
